Background
I have a problem with dynamically embedding components. I'm working on a CMS, which will allow to add random CMS Components, which are written in react. Each component renders to its own div, all components are completely separated. They do not know about existence of other components. I believe, it is not the "react way" of doing stuff, but this is what I've got in my project, and rewriting everything is not an option.
In general this approach works fine, for example when components are added next to each other, one after another. However, I have few components, which can embed other components. I want to re-use components as much as possible.
I will try to describe an example: Let say I have a Teaser component, which renders an image, and optionally Editor can add to the Teaser component other components: Text and/or Button. So in the end the teaser component may only have image, sometimes Image and two buttons, and sometimes Image, Text, and the button.
All components are added by the CMS editor, so when I place Button on a page, it will render a button. When editor will add teaser, it will render itself (with no children components yet).
What is the problem/question:
When Editor now adds button to the teaser component I don't know how to handle it properly.
When component is added, it has to be added outside of Teaser Component root div, otherwise Teaser component will remove any embedded components.
What I could do, I could have component registry, and when for example Button is added to the Teaser component, I could pass the Button component JSON params to the teaser component params as for example children array, and Teaser will have a logic to for example based on some property, it will take appropriate component (Button) from the Component Registry, and render it, however when component is added to the teaser, as it is completely independent CMS component, it doesn't know that it should be rendered by the teaser component. So what I will have:
Any ideas how such case can be solved ?